<template>
  <div style="display: flex;margin-top: 20px">
    <div class="titles">
      <el-card shadow="always" style="height: 550px">
        <el-button :type="userInfo?'primary':''" link style="margin-top: 10px;margin-left: 12px" @click="UserInfo">
          个人信息
        </el-button>
        <el-button :type="account?'primary':''" link style="margin-top: 10px" @click="Account">
          账户管理
        </el-button>
        <el-button :type="informational?'primary':''" link style="margin-top: 10px"
                   @click="Informational">信息通知
        </el-button>
        <el-button :type="authent?'primary':''" link style="margin-top: 10px" @click="authentication">
          身份认证
        </el-button>
      </el-card>
    </div>
    <div style="margin-left: 10px">
      <el-card shadow="always" style="width: 90%;height: 550px">
        <personalInformation  @authentication="authentication" v-if="userInfo"/>
        <accountManagement v-if="account"/>
        <information :user-id="userData.id" v-if="informational"/>
        <identity :user-id="userData.id" :user-type="userData.occupation" v-if="authent"/>
      </el-card>
    </div>
  </div>
</template>
<script setup>
import {ref} from "vue"
import personalInformation from '@/pages/userData/personalInformation.vue'
import accountManagement from '@/pages/userData/accountManagement.vue'
import information from '@/pages/userData/information.vue'
import identity from '@/pages/userData/identity.vue'
import {useUserStore} from '@/pinia/stores/user'
const userInfo = ref(true)
const account = ref(false)
const authent = ref(false)
const informational = ref(false)
const userStore = useUserStore()
const userData = userStore.userInfo
const UserInfo = () => {
  userInfo.value = true
  account.value = false
  informational.value = false
  authent.value = false
}
const Account = () => {
  userInfo.value = false
  account.value = true
  informational.value = false
  authent.value = false
}
const Informational = () => {
  userInfo.value = false
  account.value = false
  informational.value = true
  authent.value = false
}
const authentication = () => {
  userInfo.value = false
  account.value = false
  informational.value = false
  authent.value = true
}
</script>

<style scoped>
.titles {
  text-align: center;
  width: 100px;
  height: 500px;
  margin-left: 10px;
}

</style>
